<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平居中布局实现方式2:table + margin</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#parent{
				width: 100vw;
				height: 200px;
				background-color: aqua;
			}
			#child{
				width: 20vw;
				height: 200px;
				background-color: bisque;
				/* 
					3. display值为block和table都可以。原因是我们使用的是div,div本身带有block属性 
				*/
				display: block;
				/* 
					4. margin属性：外边距。
						一个值代表:上右下左
						两个值代表：上下、左右
						三个值代表：上、左右、下
						
					提示：auto表示根据浏览器自动分配，此时浏览器会等分
				*/
				margin: 0 auto;   
			}
			
			/* 
				5.table + margin 方案的优缺点：
			    优点：只需要对子元素进行设置，就可以现实水平方向居中布局效果
			    缺点：如果子级脱离文档流，会导致margin属性的值无效 。
			*/
		</style>
	</head>
	<body>
		<!-- 1. 定义父级元素 -->
		<div id="parent">
			<!-- 2. 定义子级元素 -->
			<div id="child">
				2:table + margin
			</div>
		</div>
	</body>
</html>
